<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
    <meta charset="utf-8">
    <title>节流防抖</title>
    <link rel="stylesheet" href="./src/css/common.css">
    <style>

    </style>
</head>
<body>
<div class="title">防抖测试</div>

<button class="button" onclick="submitForm({id:12,name:'English'})">test</button>
<div id="result-box" class="result-box">

</div>
<script src="./src/js/tools.js"></script>
<script>
    let resultEl = document.getElementById("result-box")
    // 节流函数
    function debounce(func, delay) {
        let timer;
        return function() {
            clearTimeout(timer);
            timer = setTimeout(() => {
                func.apply(this, arguments);
            }, delay);
        };
    }
    // 需要节流的方法
    function test(row) {
        // console.log("Hello,World!",getDate())
        resultEl.innerHTML += '<p>'+row.id + ', ' + getDate()+'最后一次点击后开始计时,1秒后才执行</p>'
    }
    // 给test方法赋予节流
    const submitForm = debounce(test, 1000); // 延迟 1 秒执行

</script>
</body>

</html>
